<template>
  <el-dialog
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    append-to-body
    top="30px"
    width="80%"
  >
    <el-button
      class="float-right mb-1"
      @click="getData()"
      icon="el-icon-refresh"
      :loading="loading"
    >
      刷新
    </el-button>
    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:second="scope">
        <el-button v-if="+scope.row.pay_type === 33" @click="showPayUrl(scope.row.pay_url)">
          打开
        </el-button>
        <el-popover v-else placement="top-start" title="支付二维码" trigger="hover">
          <div>
            <qr-code :value="scope.row.pay_url" :size="140"></qr-code>
          </div>
          <el-button slot="reference" type="text">
            <i class="fa fa-qrcode"></i>
          </el-button>
        </el-popover>
      </template>

      <template v-slot:url="scope">
        <el-button v-if="+scope.row.pay_type === 33" @click="showPayUrl(scope.row.pay_url)">
          打开
        </el-button>
        <el-button v-else @click="handleCopy(scope.row.pay_url)" type="text">复制链接</el-button>
      </template>
    </c-table>
  </el-dialog>
</template>

<script>
import { enumPayMethods, enumPayStatus } from '@/credit/views/union/settle/enum'
import { copyText } from '@vimi/utils-tool'
export default {
  components: {},
  props: {
    visible: Boolean,
    id: String,
  },
  data() {
    return {
      loading: false,
      tableData: [],
      order: {
        source_tx_time: 'desc',
      },
      tableName: 'pay_fee_record_bank',
      tableColumns: [
        { attrs: { prop: 'order_no', label: '订单号' } },
        { attrs: { prop: 'actual_payer', label: '实际支付人' } },
        { attrs: { prop: 'pay_type', label: '支付方式' }, process: v => enumPayMethods[v] },
        { attrs: { prop: 'sourceTxTime', label: '发起时间' } },
        { attrs: { prop: 'payTime', label: '支付时间' } },
        { attrs: { prop: 'amount', label: '支付金额' } },
        {
          attrs: { prop: 'statusLabel', label: '订单状态', align: 'center' },
          process: (v, row) => ({
            attrs: { style: `color: ${row.statusStyle}` },
          }),
        },
        {
          attrs: { prop: 'pay_url', label: '支付链接', align: 'center', width: '100px' },
          slot: 'url',
        },
        { attrs: { prop: 'second', label: '支付二维码', align: 'center' }, slot: 'second' },
      ],
    }
  },
  computed: {},
  watch: {
    id: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    showPayUrl(url) {
      const formContent = document.createElement('div')
      formContent.style.width = '0'
      formContent.style.height = '0'
      formContent.style.opacity = '0'
      formContent.innerHTML = url
      document.body.appendChild(formContent)
      const form = formContent.querySelector('#form1')
      if (form) {
        form.submit()
      } else {
        this.$message.warning('订单出错')
      }
      document.body.removeChild(formContent)
    },
    handleCopy(value) {
      const success = copyText(value)
      if (success) {
        this.$message.success('已复制到粘贴板')
      } else {
        this.$message.error('已复制到粘贴失败')
      }
    },
    dataAdapter(item) {
      item.sourceTxTime = this.getTime(item.source_tx_time)
      item.payTime = this.getTime(item.pay_time)
      const payStatus = enumPayStatus[item.status] ?? {}
      item.statusLabel = payStatus.label
      item.statusStyle = payStatus.color
      return item
    },
    getTime(s) {
      if (!s) {
        return ''
      }
      return `${s.substring(0, 4)}-${s.substring(4, 6)}-${s.substring(6, 8)} ${s.substring(
        8,
        10
      )}:${s.substring(10, 12)}:${s.substring(12, 14)}`
    },
    getData() {
      if (!this.id) {
        this.tableData = []
        return
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, { 'order_no.eq': this.id }, this.order)
        .then(res => {
          this.tableData = (res?.data ?? []).map(this.dataAdapter)
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped></style>
